/* eslint-disable react/jsx-indent */
/* eslint-disable no-nested-ternary */
import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { exportQAHistories } from '@/services/download';
import qs from 'qs';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Card, Row, Col, Form, Input, Button, message, Icon, Checkbox, Table, Tag, Select, Modal, Radio, Spin, Upload, Tabs } from "antd";
import Custom from './custom.js'
import CustomNew from './customNew'

const { TabPane } = Tabs;
const FormItem = Form.Item;
const Search = Input.Search;
const InputGroup = Input.Group;
import styles from "./index.less";
const { Option } = Select;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
import pen from '../../../assets/icons/bi.png';
import ljx from '../../../assets/icons/垃圾箱.png';


class System extends Component {
  state = {
    color: 'rgba(0, 0, 0, 0.65)',
    colorName: null,
    query: '',
    pdx: 0,
    list: [],
    arrayS: { name: '', id: '', desc: '' }
  };

  componentDidMount() {
    this.fetch()
  }

  // 主页列表
  fetch = (val = '') => {
    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;
    console.log(currentUser)
    const { dictType, page, limit, dictNames } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'customDictionary/BasicDictSysList',
        payload: { query: val },
        callback: res => {
          console.log('列表数据', res);
          this.props.totalBHome(res.length)
          if (res.length === 0) {
            let list = [{
              createTime: "",
              desc: "",
              dictType: "",
              id: "",
              items: [],
              name: "搜索为空",
              updateTime: ""
            }]
            this.setState({
              list,
              arrayS: list[0]
            })
          } else {
            this.setState({
              list: res,
              arrayS: res[0]
            })
          }

        },
      });
    });
  }

  // 搜索
  search = (val) => {
    console.log(val)
    const { list } = this.state
    this.fetch(String(val))
  }



  callback = (key) => {
    console.log(key);

  }

  showRev = (a, b) => {
    //  console.log(a,b)
    this.setState({ colorName: b })
  }

  showRevS = (a, b) => {
    // console.log(a,b)
    this.setState({ colorName: null })
  }

  handleDeletes = (e, index) => {
    console.log(e, index)
    this.setState({ pdx: index, arrayS: e })

  }

  listHq = () => {
    const { dispatch, currentUser } = this.props;
    const { query } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'businessDictionary/BasicDictSysList',
        payload: { query, },
        callback: res => {
          console.log('删除', res);
          if (res.code === 0) {
            message['success'](`${res.msg}`)
            // this.fetch(this.state.searchValue)
          }
        },
      });
    });
  }

  // eslint-disable-next-line react/sort-comp
  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <div style={{ display: 'flex', flexWrap: 'nowrap', paddingBottom: 20 }}>
        <div style={{ minWidth: 250, background: '#f7f7f7', marginRight: 20, width: '10%'}} >
          <Row>
            <Col style={{ background: '#e4e4e8', height: 50, padding: '9px 14px' }} span={24}>
              <Search
                placeholder="请输入搜索内容"
                onSearch={value => this.search(value)}
              />
            </Col>
            <Col span={24} className={styles.leftContent}>
              <div style={{ height: 24 }}></div>

              {
                this.state.list.map((item, index) => {
                  let a = this.state.colorName === index ? '#1890ff' : 'rgba(0, 0, 0, 0.65)'
                  let leftText = this.state.pdx === index ? { background: '#19c3f3', padding: '12px 40px', margin: '0px 8px', color: '#fff' } : { padding: '12px 40px', margin: '0px 8px', color: a }
                  return <p className={styles.leftStyle} onMouseOut={() => { this.showRevS(item, index) }} onMouseOver={() => { this.showRev(item, index) }} onClick={() => { this.handleDeletes(item, index) }} style={leftText}>{item.name}</p>
                })
              }
              <div style={{ height: 24 }}></div>
            </Col>
          </Row>
        </div>
        <div style={{ width: '90%'}} >

          <div className={styles.rightContent}>
            <span style={{ float: "left", fontSize: 16, fontWeight: 600, marginRight: 10 }}>{this.state.arrayS.name}</span>
            <span style={{ color: '#d1d5da' }}>{this.state.arrayS.id}</span>
            <p></p>
            <span style={{ color: '#80909b' }} dangerouslySetInnerHTML={{ __html: this.state.arrayS.desc }}></span>
          </div>
        </div>

      </div>



    );
  }


}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(System));
